<div class="modal fade" id="modal-clo">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title text-center">添加学习官</h4>
            </div>
            <div class="modal-body">
                <form action="{{route('lessons_clo_add')}}" method="post" enctype="multipart/form-data" id="clo_add">
                    {{csrf_field()}}
                    <div class="form-group">
                        <label for="clo_name" class="control-label">姓名 <i class="fa fa-user"></i> </label>
                        <div class="">
                            <select name="clo_name" style="width: 100%" id="clo_name" class="form-control">
                                @foreach($clos as $k=>$v)
                                    <option value="{{$v->user_id}}">{{$v->YourName}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="clearfix"></div>

                    <div class="form-group">
                        <label for="user_img" class="control-label">学习官图片<i class="fa fa-picture-o"></i></label>
                        <div style="width: 200px;height: 200px;border: 1px solid transparent">
                            <img id="pre_img" src="" alt="2:3 比例" style="text-align: center;line-height: 200px;width: 100%;display: block;font-size: 35px
;background: grey;opacity: 0.3;max-height: 200px">
                        </div>
                        <br>
                        <div class="">
                            <input type="file" name="user_img" id="user_img" class="form-control" value="" title=""
                                   required="required" accept="image/gif,image/png,image/jpeg,image/jpg">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <br>
                    <div class="form-group">
                        <label for="title" class=" control-label">学习官标题 <i class="fa fa-ticket"></i> </label>
                        <div class="">
                            <input type="text" name="title" id="title" class="form-control pull-right" value="" title=""
                                   required="required">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <br>
                    <div class="form-groupg">
                        <label for="title" class="control-label" style="margin-bottom: 20px">学习官介绍:</label>

                        <div class="">
                            <input name="introduce" id="introduce" type="hidden">
                            <div id="editor" style="width: 100%;margin-top: -15px" name="introduce"></div>
                        </div>
                    </div>
                    <br>
                    <hr>
                    <div class="clearfix"></div>
                    <button type="button" class="btn btn-info" style="width: 100%" data-dismiss="modal">关闭</button>
                    <br><br>
                    <button type="button" class="btn btn-danger" id="clo_button_add" style="width: 100%">保存修改</button>
                </form>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="{{asset('admin/js/wangEditor.min.js')}}"></script>
<link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
    var E = window.wangEditor
    var editor = new E('#editor')
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
    ];
    editor.customConfig.onchange = function (html) {
        $('#introduce').val(editor.txt.text())
        console.log(editor.txt.text());

    }
    editor.create()

    $(function () {
        $('#user_img').on('change', function (e) {
                var file = e.target.files[0];
                var src = URL.createObjectURL(file);
                var img = new Image();
                img.src = src;
                img.onload = function () {
                    var width = img.width;
                    var height = img.height;
                    var bili = width / height;
                    if (bili.toFixed(2) == 0.67) {
                        $('#pre_img').attr('src', src).css({'background': 'none', 'opacity': '1'});
                        $('#clo_button_add').on('click', function () {
                            $('#clo_add').submit();
                        })

                    } else {
                        $('#pre_img').attr('alt', '比例错误');
                        $('#pre_img').attr('src', null).css({'background': 'grey', 'opacity': '0.3'});
                        console.log(bili.toFixed(2));
                        swal("Oops...", "请选择2:3的比例的图片!", "error");
                    }
                }
            }
        );
    })


</script>